<template>
    <div class="box">
        <Breadcrumb class="nav-box">
            <BreadcrumbItem to="/article">所有文章</BreadcrumbItem>
            <BreadcrumbItem v-if = " currentRoute == '/article/new'">新增文章</BreadcrumbItem>
            <BreadcrumbItem v-if = " currentArticleId " v-text="$route.params.articleId == article.id ? article.title : '加载中……'"></BreadcrumbItem>
        </Breadcrumb>
        <router-view></router-view>
    </div>
</template>

<script type="text/ecmascript-6">
    import {mapState} from 'vuex'
    export default{
        components: {
        },
        data () {
            return {

            }
        },
        computed: {
            ...mapState('article', ['article']),
            currentRoute(){
                return this.$route.path;
            },
            currentArticleId(){
                if(this.$route.params.articleId){
                    return true;
                }else{
                    return false;
                }
            }
        },
        methods: {

        },
        created(){

        },
        mounted(){

        }
    }
</script>

<style scoped>
    .box{
        max-width:1000px;
        margin:0 auto;
        padding-top:20px;
    }
    .nav-box{
        margin-bottom:20px;
    }
</style>
